<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 2. 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="main" style="width: 800px;height:400px;"></div>
        </el-card>
    </div>
</template>

<script>
// 1. 导入echarts
import echarts from 'echarts';
import _ from 'lodash';
const resData = {
    legend: {
        data: ['华东', '华南', '华北', '西部', '其他']
    },
    series: [
        {
            name: '华东',
            type: 'line',
            stack: '总量',
            areaStyle: {
                normal: {}
            },
            data: [2999, 3111, 4100, 3565, 3528, 6000]
        },
        {
            name: '华南',
            type: 'line',
            stack: '总量',
            areaStyle: {
                normal: {}
            },
            data: [5090, 2500, 3400, 6000, 6400, 7800]
        },
        {
            name: '华北',
            type: 'line',
            stack: '总量',
            areaStyle: {
                normal: {}
            },
            data: [6888, 4000, 8010, 12321, 13928, 12984]
        },
        {
            name: '西部',
            type: 'line',
            stack: '总量',
            areaStyle: {
                normal: {}
            },
            data: [9991, 4130, 7777, 12903, 13098, 14028]
        },
        {
            name: '其他',
            type: 'line',
            stack: '总量',
            areaStyle: {
                normal: {}
            },
            data: [15212, 5800, 10241, 14821, 15982, 14091]
        }
    ],
    xAxis: [
        {
            data: ['2017-12-27', '2017-12-28', '2017-12-29', '2017-12-30', '2017-12-31']
            // boundaryGap: false
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ]    
};
export default {
    data() {
        return {
            resData: resData,
            // 需要合并的数据
            options: {
                title: {
                    text: '用户来源'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#E9EEF3'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        // data: ['2022-06-15', '2022-06-16', '2022-06-17', '2022-06-18', '2022-06-19'],
                        boundaryGap: false
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ]
            }
        }
    },
    created() {},
    // 初始化图标必须在页面dom结构被渲染完毕之后才能进行初始化
    // mounted在dom创建完成之后才执行
    // 此时页面上的元素, 已经被渲染完毕了
    async mounted() {
        // 然后就可以通过 echarts.init 方法初始化一个 echarts 实例
        // 3. 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        const {data: res} = await this.$http.get('reports/type/1');
        if(res.meta.status !== 200){
            return this.$message.error('获取折线图数据失败!');
        }
        // console.log('---------------------');
        // console.log(res.data);
        // console.log('---------------------');
        // 4. 准备数据和配置项
        // 指定图表的配置项和数据
        const result = _.merge(res.data, this.options);
        // const result = _.merge(this.resData, this.options);
        console.log(result);
        
        // 5. 展示数据
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(this.resData);
    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
</style>